<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>		
		<script src="../js/jquery-1.11.3.js"></script>
		<script src="../js/jquery.cookie.js"></script>
        <script src="../js/ajax.js"></script>
		<script type="text/javascript" src="../js/require.js" defer async="true" data-main = "../js/main"></script>
		<link rel="stylesheet" href="../css/page.css"/>
	</head>
	<body>
		<div id="header"></div>
		<script>
			$("#header").load("http://127.0.0.1/XiaoZhuangWangXiangMu/html/public.html #header");
		</script>
		<div class="title_z">
			<div class="title_w">
				<div class="title_y">
					<div class="title_v">
						<span>全部商品分类</span>
					</div>
					<div class="title_u">
						<ul class="title_q">
							<li>
								<img src="../img/aa.jpg">
								<dl>
									<dt><span>面部护肤</span></dt>
									<dt><span>防晒隔离</span><span>面膜</span></dt>
									<dt><span>眼部护理</span><span>护肤套装</span></dt>
								</dl>
							</li>
							<li>
								<img src="../img/bb.jpg">
								<dl>
									<dt><span>面部护肤</span></dt>
									<dt><span>防晒隔离</span><span>面膜</span></dt>
									<dt><span>眼部护理</span><span>护肤套装</span></dt>
								</dl>
							</li>
							<li>
								<img src="../img/cc.jpg">
								<dl>
									<dt><span>面部护肤</span></dt>
									<dt><span>防晒隔离</span><span>面膜</span></dt>
									<dt><span>眼部护理</span><span>护肤套装</span></dt>
								</dl>
							</li>
							<li>
								<img src="../img/dd.jpg">
								<dl>
									<dt><span>面部护肤</span></dt>
									<dt><span>防晒隔离</span><span>面膜</span></dt>
									<dt><span>眼部护理</span><span>护肤套装</span></dt>
								</dl>
							</li>
							<li>
								<img src="../img/ee.jpg">
								<dl>
									<dt><span>面部护肤</span></dt>
									<dt><span>防晒隔离</span><span>面膜</span></dt>
									<dt><span>眼部护理</span><span>护肤套装</span></dt>
								</dl>
							</li>
							<li>
								<img src="../img/ff.jpg">
								<dl>
									<dt><span>面部护肤</span></dt>
									<dt><span>防晒隔离</span><span>面膜</span></dt>
									<dt><span>眼部护理</span><span>护肤套装</span></dt>
								</dl>
							</li>
						</ul>
					</div>
				</div>
				<div class="title_x">
					<a href="../XiaoZhuangWangXiangMu/index.html">首页</a>
					<a href="">SKIN79专区</a>
					<a href="">积分购</a>
					<a href="">美堂课</a>
					<a href="">手机校妆</a>
					<a href="">购物车</a>
				</div>
			</div>
		</div>
		<!--detail-->
		<div class="detail_body">
			<div class="detail_show">
				<div class="detail_pos">
					<a href="">首页 ></a>
					<a href="">面部护肤 ></a>
					<a href="">化妆品 ></a>
					<a href="">柔肤水</a>
				</div>
				<div class="detail_left">
					<div class="detail_big">
						<div class="detail_1">
							<div class="detail_3">
								<div class="detail_5">
									<div class="detail_7">
										<!--放大镜-->
										<div class="vol" id="vol">
											<ol class="bigBox" id="top" style="z-index:10">
         		                                 <li><img src="../img/611.jpg" alt="" width="840" height="772" class="bimIng" id="bimIng1"></li>
         		                                 <li><img src="../img/612.jpg" alt="" width="840" height="772" class="bimIng" id="bimIng2"></li>
         		                                 <li><img src="../img/613.jpg" alt="" width="840" height="772" class="bimIng" id="bimIng3"></li>
         		                                 <li><img src="../img/614.jpg" alt="" width="840" height="772" class="bimIng" id="bimIng4"></li>
         	                                </ol>
         	                                <ol class="bigImg" id="height">
         		                                 <li><img src="../img/611.jpg" alt="" class="smallImg" id="smallImg"></li>
         	
           	                                     <li><img src="../img/612.jpg" alt="" class="smallImg" width="420" height="336"></li>
         
         		                                 <li><img src="../img/613.jpg" alt="" class="smallImg" width="420" height="336"></li>
         	
         		                                 <li><img src="../img/614.jpg" alt="" class="smallImg" width="420" height="336"></li>
         		                                 <div class="center" id="center"></div><div class="mask" id="mask"></div>
         	                                </ol>
         	                                <ul class="down" id="down">
         		                                 <li><img src="../img/611.jpg" alt="" class="downImg"></li>
         		                                 <li><img src="../img/612.jpg" alt="" class="downImg" width="60" height="60"></li>
         		                                 <li><img src="../img/613.jpg" alt="" class="downImg" width="60" height="60"></li>
         		                                 <li><img src="../img/614.jpg" alt="" class="downImg" width="60" height="60"></li>
         	                                </ul>
										</div>
									</div>
									<div class="detail_8">
										<div class="detail_11">
											<span>思亲肤莴苣黄瓜沁颜化妆水180ml</span>
										</div>
										<div class="detail_12">
											<div class="p_1"><span>品牌：skinnfoo思亲肤  货号：22790</span></div>
											<div class="p_2"><span>市场价：￥110</span></div>
											<div class="p_3"><span>梳妆价：<i style="color:orange">￥<b style="color:orange">72.00</b></i></span></div>
											<div class="p_4"><span>所得积分：72</span></div>
											<div class="p_5"><a>已出售：<i style="color:orange">38</i>件</a><span>浏览人数:<b style="color:orange">1222</b></span></div>
											<div class="p_6"><span>促销信息：<i style="color:orange">全站满98元包邮</i></span></div>
											<div class="p_7"><span>购买数量：</span><div class="n_1">
												<div class="m_1">
													<img src="../img/701.jpg"/>
												</div>
												<div class="m_2">
													<input type="text" value="1" name="buy_num" class="buy_num_show"/>
												</div>
												<div class="m_3">
													<img src="../img/700.jpg"/>
												</div>
											</div></div>
											<div class="p_8"><a>加入购物车</a></div>
										</div>
									</div>
								</div>
								<div class="detail_6">
								</div>
							</div>
							<div class="detail_4">
								<div class="detail_9">
									<div class="detail_9_a">
										<img src="../img/800.jpg"><a>分享到：</a>
										<ul>
											<li><img src="../img/801.jpg"></li>
											<li><img src="../img/802.jpg"></li>
											<li><img src="../img/803.jpg"></li>
											<li><img src="../img/804.jpg"></li>
											<li><img src="../img/805.jpg"></li>
											<li><img src="../img/806.jpg"></li>
											<li><img src="../img/807.jpg"></li>
											<li><img src="../img/808.jpg"></li>
										</ul>
									</div>
								</div>
								<div class="detail_10">
									<div class="root_1"><img class="root_a" src="../img/900.jpg"/><a class="root_b">正品承诺</a></div>
									<div class="root_2"><img class="root_a" src="../img/901.jpg"/><a class="root_b">校园服装</a></div>
									<div class="root_3"><img class="root_a" src="../img/902.jpg"/><a class="root_b">闪电发货</a></div>
									<div class="root_4"><img class="root_a" src="../img/904.jpg"/><a class="root_b">开箱验码</a></div>
								</div>
							</div>
						</div>
						<div class="detail_2">
							<div class="feel_a">
								<ul>
									<li>商品参数</li>
									<li>商品详情</li>
									<li>口碑报告</li>
									<li>商品咨询</li>
									<li>服务承诺</li>
								</ul>
							</div>
							<div class="feel_b">
								<a>货号：1232          &ensp;&ensp;&ensp;&ensp;所得积分：78</a>
								            
								<p>品牌：skinfood思亲肤</p>
							</div>
						</div>
					</div>
				    <div class="detail_small">
				    	<img src="../img/619.jpg" alt="" />
				    	<img src="../img/620.jpg" alt="" />
				    	<img src="../img/621.jpg" alt="" />
				    	<img src="../img/622.jpg" alt="" />
				    	<img src="../img/623.jpg" alt="" />
				    	<img src="../img/624.jpg" alt="" />
				    	<img src="../img/625.jpg" alt="" />
				    	<img src="../img/626.jpg" alt="" />
				    	<img src="../img/627.jpg" alt="" />
				    	<img src="../img/628.jpg" alt="" />
				    </div>
				</div>
				<div class="detail_right">
					<div class="detail_a">
						<div class="detail_b">
							柔肤水排行榜
						</div>
						<div class="detail_c">
							<ul class="got">
								<!--<li>
									<a class="detail_r"><img  class="detail_q" src="../img/300.jpg"/></a>
									<span class="detail_f">skin79 粉红能量温和柔肤水 160ml</span>
									<p class="detail_e">￥99.00</p>
								</li>
								<li>
									<a class="detail_r"><img  class="detail_q" src="../img/350.jpg"/></a>
									<span class="detail_f">skin79 粉红能量温和柔肤水 160ml</span>
									<p class="detail_e">￥99.00</p>
								</li>
								<li>	
									<a class="detail_r"><img  class="detail_q" src="../img/351.jpg"/></a>
									<span class="detail_f">skin79 粉红能量温和柔肤水 160ml</span>
									<p class="detail_e">￥199.00</p>
								</li>
								<li>
									<a class="detail_r"><img  class="detail_q" src="../img/352.jpg"/></a>
									<span class="detail_f">skin79 粉红能量温和柔肤水 160ml</span>
									<p class="detail_e">￥299.00</p>
								</li>
								<li>
									<a class="detail_r"><img  class="detail_q" src="../img/351.jpg"/></a>
									<span class="detail_f">skin79 粉红能量温和柔肤水 160ml</span>
									<p class="detail_e">￥180.00</p>
								</li>-->
							</ul>
						</div>
					</div>
					<div class="detail_a">
						<div class="detail_b">
							猜你喜欢
						</div>
						<div class="detail_c">
							<ul class="detail_t">
								<!--<li>
									<a class="detail_r"><img  class="detail_q" src="../img/300.jpg"/></a>
									<span class="detail_f">skin79 粉红能量温和柔肤水 160ml</span>
									<p class="detail_e">￥99.00</p>
								</li>
								<li>
									<a class="detail_r"><img  class="detail_q" src="../img/350.jpg"/></a>
									<span class="detail_f">skin79 粉红能量温和柔肤水 160ml</span>
									<p class="detail_e">￥99.00</p>
								</li>
								<li>
									<a class="detail_r"><img  class="detail_q" src="../img/351.jpg"/></a>
									<span class="detail_f">skin79 粉红能量温和柔肤水 160ml</span>
									<p class="detail_e">￥199.00</p>
								</li>
								<li>
									<a class="detail_r"><img  class="detail_q" src="../img/352.jpg"/></a>
									<span class="detail_f">skin79 粉红能量温和柔肤水 160ml</span>
									<p class="detail_e">￥299.00</p>
								</li>
								<li>
									<a class="detail_r"><img  class="detail_q" src="../img/351.jpg"/></a>
									<span class="detail_f">skin79 粉红能量温和柔肤水 160ml</span>
									<p class="detail_e">￥180.00</p>
								</li>-->
							</ul>
						</div>
					</div>
					<div class="detail_a">
						<div class="detail_b">
							购买此商品的用户还购买
						</div>
						<div class="detail_c">
							<ul class="detail_u">
								<!--<li>
									<a class="detail_r"><img  class="detail_q" src="../img/300.jpg"/></a>
									<span class="detail_f">skin79 粉红能量温和柔肤水 160ml</span>
									<p class="detail_e">￥99.00</p>
								</li>
								<li>
									<a class="detail_r"><img  class="detail_q" src="../img/350.jpg"/></a>
									<span class="detail_f">skin79 粉红能量温和柔肤水 160ml</span>
									<p class="detail_e">￥99.00</p>
								</li>
								<li>
									<a class="detail_r"><img  class="detail_q" src="../img/351.jpg"/></a>
									<span class="detail_f">skin79 粉红能量温和柔肤水 160ml</span>
									<p class="detail_e">￥199.00</p>
								</li>
								<li>
									<a class="detail_r"><img  class="detail_q" src="../img/352.jpg"/></a>
									<span class="detail_f">skin79 粉红能量温和柔肤水 160ml</span>
									<p class="detail_e">￥299.00</p>
								</li>
								<li>
									<a class="detail_r"><img  class="detail_q" src="../img/351.jpg"/></a>
									<span class="detail_f">skin79 粉红能量温和柔肤水 160ml</span>
									<p class="detail_e">￥180.00</p>
								</li>-->
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--footer-->
		<div id="footer"></div>
		<script>
			$("#footer").load("http://127.0.0.1/XiaoZhuangWangXiangMu/html/public.html #footer");
		</script>
	</body>
</html>
<script>
//	$("#down li").mouseenter(function(){
//		var index = $(this).index();
//		$("#height img").eq(index)
//					   .show()
//					   .siblings()
//					   .hide();
//		$("#top img").eq(index)
//					 .show()
//					 .siblings()
//					 .hide();
////		$("#mask").css({
////			"backgroundImage":"url(../img/"+(index+1)+".jpg)"
////		})
//	})
//	$("#height").mouseover(function(){
//		$("#layer").show();
//		$("#mask").show();
//		$("#top").show();
//	}).mouseout(function(){
//		$("#layer").hide();
//		$("#mask").hide();
//		$("#top").hide();
//	}).mousemove(function(e){
//		var e = e || event;
//		var x = e.pageX - $("#height").offset().left - $("#mask").outerWidth()/2;
//		var y = e.pageY - $("#height").offset().top - $("#mask").outerHeight()/2;
//		var maxL = $("#vol").outerWidth() - $("#mask").outerWidth();
//		var maxT = $("#vol").outerHeight() - $("#mask").outerHeight();
//		
//		x = Math.min( maxL , Math.max(0,x) );
//		y = Math.min( maxT , Math.max(0,y) );
//		
//		$("#mask").css({
//			"left" : x ,
//			"top" : y ,
//			"backgroundPositionX" : -x,
//			"backgroundPositionY" : -y
//		})
//		//大图/小图 = 大图left / mask . left = 大图显示区 /小图显示区mask
//		var bigImgX = x*$(".bigIng").width()/$("#height").width();
//		var bigImgY = y*$(".bigIng").height()/$("#height").height();
//		$(".bigIng").css({
//			"left" : -bigImgX,
//			"top" : -bigImgY
//		})
//	})
</script>
<script>
	function $1(id){
		return document.getElementById(id);
	}
	onload = function(){
		var oList = $1("height").getElementsByTagName("li");
		var uList = $1("down").getElementsByTagName("li");
		var li=document.getElementsByClassName("bimIng");
		for(var i = 0 ; i < uList.length ; i++){
			uList[i].index = i;
			uList[i].onmouseover = function(){
				for(var j = 0 ; j < uList.length ; j++){
					oList[j].style.display = "none";
					li[j].style.display="none";
				}
				oList[this.index].style.display = "block";
				li[this.index].style.display="block";
			}
		}
		
		$1("height").onmouseover = function(){
			$1("mask").style.display = "block";
			$1("top").style.display = "block";
		}
		$1("height").onmouseout = function(){
			$1("mask").style.display = "none";
			$1("top").style.display = "none";
		}
		var w = $1("bimIng1").offsetWidth;
		var w1 = $1("smallImg").offsetWidth;
		var h = $1("bimIng1").offsetHeight;
		var h1 = $1("smallImg").offsetHeight;
		$1("height").onmousemove = function(e){
			var e = e || event;
			var x = e.pageX - $1("mask").offsetWidth/2 - $1("vol").offsetLeft;
			var y = e.pageY - $1("mask").offsetHeight/2 - $1("vol").offsetTop;
			var maxL = $1("vol").offsetWidth - $1("mask").offsetWidth -2;
			var maxT = $1("vol").offsetHeight - $1("mask").offsetHeight -2;
			
			x = x < 0 ? 0 : ( x > maxL ? maxL : x );
			y = y < 0 ? 0 : ( y > maxT ? maxT : y );
			
			
			var bimIngLeft = x*840 / 420;
			var bimIngTop = y*772/ 336;
			$1("mask").style.left = x + "px";
			$1("mask").style.top = y + "px";
			
			for( var i = 0 ; i < li.length ; i++ ){
				li[i].style.left = -bimIngLeft + "px";
				li[i].style.top = -bimIngTop + "px";
			}
		}
	}
</script>
<script>
//	$(function(){
// 		var str = location.href;
// 			if( str.indexOf( "?" ) == -1){
// 				return;
// 			}
// 			str = str.split("?")[1];
// 		var arr = str.split("&");
// 		var attr = arr[0].split("=")[1];
//// 		var id = arr[1].split("=")[1];
// 		
// 		$.ajax({
// 			type:"get",
// 			url:"http://127.0.0.1/XiaoZhuangWangXiangMu/json/index.json",
// 			async:true,
// 			success : function(json){
// 				var html1 = "";
// 				var html2 = "";
// 				var html3 = "";
// 				for( var i = 0 ; i < json[attr].length ; i++ ){
// 					if( json[attr].id == pid ){
// 						html1 += `
// 						 <li><img src="../img/json[attr][i].srcb" alt="" width="840" height="772" class="bimIng" id="bimIng1"></li>
//       		        
// 						`
// 						
//						html2 +=`
// 						<li><img src="../img/json[attr][i].srcm" alt="" class="smallImg" width="420" height="336"></li>
//       		            <div class="center" id="center"></div><div class="mask" id="mask"></div>
// 						`
// 						html3 +=`
// 						<li><img src="../img/${attr[json][i].srcs}" alt="" class="downImg"></li>
//       		        <li><img src="../img/${attr[json][i].srcs}" alt="" class="downImg" width="60" height="60"></li>
//       		        <li><img src="../img/${attr[json][i].srcs}" alt="" class="downImg" width="60" height="60"></li>
//       		        <li><img src="../img/${attr[json][i].srcs}" alt="" class="downImg" width="60" height="60"></li>
// 						`
// 					}
// 				}
// 				
// 					  
// 			      $(".bigBox").html(html1)
// 			      $(".bigImg").html(html2)
// 			      $(".down").html(html3)
// 			}
// 			 
// 		});
// })
</script>